<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--SEO优化项 -->
    <title>首页</title>
    <meta name="description" content="这里输入网站简介" />
    <meta name="Keywords" content="这里输入网站关键词" />
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入本页面css 文件 -->
    <link rel="stylesheet" href="css/14.css">
    <!-- 引入我们首页的css -->
    <!-- <link rel="stylesheet" href="css/index.css"> -->
    <!-- 引入swipercss文件 -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <!-- 引入swiper js 文件 -->
    <script src="js/swiper.min.js"></script>
    <!-- 引入我们自己的js文件 -->
    <script src="js/index.js"></script>
    <!-- 引入jquery -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>

<body>
    <div class="w1920 bg">


        <!-- 顶部快捷导航 -->
        <div class="nav">
            <!-- logo -->
            <div class="logo fl">
                <img src="img/duocaiyoueryuan_logo.png" width="80px" height="81px" alt="logo">
            </div>
            <!-- 导航按钮 -->
            <div class="nav-box fl">
                <!-- 首页——导航图标模块 -->
                <a href="index.html">
                    <div class="nav-bar" style="width: 47px;height: 69px;">

                        <ul class="nav-box-color">
                            <li class="nav-box-color-icon">
                                <img src="img/index@2x.png" width="23px" height="23px" alt="indexIcon">
                            </li>
                            <li class="nav-box-color-text">首页</li>
                        </ul>
                        <ul class="nav-box-Selected" style="left: 16px;"></ul>

                    </div>
                </a>

                <!-- 班级动态——导航图标模块 -->
                <a href="bjdt.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left:48px;">
                        <ul class="nav-box-color-four">
                            <li class="nav-box-color-icon">
                                <img src="img/班级 拷贝 2@2x.png" width="23px" height="23px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-four">班级动态</li>
                        <!-- <ul class="nav-box-Selected" style="left: 22px;"></ul> -->
                    </div>
                </a>


                <!-- 宝宝课表——导航图标模块 -->
                <a href="bbkc.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left: 47px;">
                        <ul class="nav-box-color-four">
                            <li class="nav-box-icon" style="top: 13px;left: 13px;">
                                <img src="img/课表@2x 拷贝 2@2x.png" width="22px" height="22px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-four">宝宝课表</li>
                        <!-- <ul class="nav-box-Selected" style="left: 22px;"></ul> -->
                    </div>
                </a>

                <!-- 宝宝请假——导航图标模块 -->
                <a href="09-02.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left: 48px;">
                        <ul class="nav-box-color-four">
                            <li href="09-02.html" class="nav-box-icon" style="top: 12px;left: 11px;">
                                <img src="img/学生请假 拷贝 2@2x.png" width="25px" height="23px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-four">宝宝请假</li>
                        <!-- <ul class="nav-box-Selected" style="left: 22px;"></ul> -->
                    </div>
                </a>

                <!-- 幼儿园介绍——导航图标模块 -->
                <a href="08-05.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left: 48px;">
                        <ul class="nav-box-color-five">
                            <li class="nav-box-icon" style="top: 13px;left: 13px;">
                                <img src="img/幼儿园 拷贝 2@2x.png" width="22px" height="25px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-five">幼儿园介绍</li>
                        <!-- <ul class="nav-box-Selected" style="left: 27px;"></ul> -->
                    </div>
                </a>

                <!-- 出勤详情——导航图标模块 -->
                <a href="07-02.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left: 48px;">
                        <ul class="nav-box-color-four">
                            <li class="nav-box-icon" style="top: 12px;left: 13px;">
                                <img src="img/出勤 拷贝 2@2x.png" width="22px" height="23px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-four">出勤详情</li>
                        <!-- <ul class="nav-box-Selected" style="left: 22px;"></ul> -->
                    </div>
                </a>

                <!-- 发展评价——导航图标模块 -->
                <a href="10.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left: 48px;">
                        <ul class="nav-box-color-four">
                            <li href="10.html" class="nav-box-color-icon">
                                <img src="img/评价 (1) 拷贝 2@2x.png" width="23px" height="23px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-four">发展评价</li>
                        <!-- <ul class="nav-box-Selected" style="left: 22px;"></ul> -->
                    </div>
                </a>

                <!-- 发展评价——导航图标模块 -->
                <a href="05.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left: 48px;">
                        <ul class="nav-box-color-four">
                            <li class="nav-box-icon" style="top: 13px;left: 11px;">
                                <img src="img/相册 拷贝 2@2x.png" width="25px" height="25px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-four">宝宝相册</li>
                        <!-- <ul class="nav-box-Selected" style="left: 22px;"></ul> -->
                    </div>
                </a>

                <!-- 宝宝课表——导航图标模块 -->
                <a href="01.html">
                    <div class="nav-bar" style="width:58px; height:69px; margin-left: 48px;">
                        <ul class="nav-box-color-four">
                            <li class="nav-box-icon" style="top: 13px;left: 13px;">
                                <img src="img/设置 拷贝 2@2x.png" width="22px" height="22px" alt="indexIcon">
                            </li>
                        </ul>
                        <li class="nav-box-color-text-four">班牌设置</li>
                        <!-- <ul class="nav-box-Selected" style="left:22px;"></ul> -->
                    </div>
                </a>

            </div>
            <!-- 日期天气时间 -->
            <div class="weatherDate-Box fr">
                <ul class="temperature fr">21-32°C</ul>
                <ul class="weather fr">
                    <img src="img/天气@2x.png" width="54px" height="53px" alt="weather">
                </ul>
                <ul class="time fr">14 : 43</ul>
                <ul class="dateBox fl">
                    <li class="date">2020-11-16</li>
                    <li class="week">星期一</li>
                </ul>
            </div>
            <!-- 顶部快捷导航start -->
        </div>

        <!--班级运行情况  -->
        <div class="cBox01">
            <div class="cBox01-tsk">
                <ul class="cBox01-tsk_txt">班级运行情况</ul>
            </div>
            <div class="cBox01-ggb">
                <ul class="cBox01-ggb_txt">大三班</ul>
            </div>
            <div class="cBox01-txt01" style="top: 124px;left: 27px;">
                老师：李佳佳 王轻轻 赵慧慧 班级人数：58
            </div>
            <div class="cBox01-txt02" style="top: 164px;left: 74px;">50</div>
            <div class="cBox01-txt02" style="top: 164px;left: 181px;">04</div>
            <div class="cBox01-txt02" style="top: 164px;left: 293px;">04</div>
            <div class="cBox01-txt01" style="top: 198px;left: 72px;">实到</div>
            <div class="cBox01-txt01" style="top: 198px;left: 180px;">未到</div>
            <div class="cBox01-txt01" style="top: 198px;left: 292px;">缺勤</div>
        </div>

        <!--宝宝食谱  -->
        <div class="cBox02">
            <div class="cBox01-tsk">
                <ul class="cBox02-tsk_txt fl">宝宝食谱</ul>
            </div>
            <div class="bbsp">
                <a href="javascript:;">
                    <li class="cBox02-txt01 cBox02-bolder" style="top: 33px;left: 32px;">早餐</li>
                    <li class="cBox02-txt01" style="top: 33px;left: 104px;">早点</li>
                    <li class="cBox02-txt01" style="top: 33px;left: 177px;">午餐</li>
                    <li class="cBox02-txt01" style="top: 33px;left: 249px;">下午茶</li>
                    <li class="cBox02-txt01" style="top: 33px;left: 337px;">晚餐</li>
                </a>
            </div>
            <div class="cBox02-list">
                <!-- 宝宝食谱概况 -->
                <div class="cBox02-item" style="display: block;">
                    <ul class="cBox02-shipu"></ul>
                    <ul class="cBox02-shipu-img01"></ul>
                    <ul class="cBox02-txt03" style="top: 130px;left: 183px;">肉包、鸡蛋、小米粥</ul>
                </div>
                <!-- 宝宝食谱概况 -->
                <div class="cBox02-item">
                    <ul class="cBox02-shipu"></ul>
                    <ul class="cBox02-shipu-img02"></ul>
                    <ul class="cBox02-txt03" style="top: 130px;left: 183px;">鸡腿饭</ul>
                </div>
                <!-- 宝宝食谱概况 -->
                <div class="cBox02-item">
                    <ul class="cBox02-shipu"></ul>
                    <ul class="cBox02-shipu-img03"></ul>
                    <ul class="cBox02-txt03" style="top: 130px;left: 183px;">香蕉</ul>
                </div>
                <!-- 宝宝食谱概况 -->
                <div class="cBox02-item">
                    <ul class="cBox02-shipu"></ul>
                    <ul class="cBox02-shipu-img04"></ul>
                    <ul class="cBox02-txt03" style="top: 130px;left: 183px;">汉堡</ul>
                </div>
                <!-- 宝宝食谱概况 -->
                <div class="cBox02-item">
                    <ul class="cBox02-shipu"></ul>
                    <ul class="cBox02-shipu-img05"></ul>
                    <ul class="cBox02-txt03" style="top: 130px;left: 183px;">鱿鱼花套餐</ul>
                </div>

            </div>

            <script>
                $(function() {
                    // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
                    $(".bbsp li").click(function() {
                        // console.log($(".bbsp li"));
                        // 链式编程操作
                        $(this).addClass("cBox02-bolder").siblings().removeClass("cBox02-bolder");
                        // 2.点击的同时，得到当前li 的索引号
                        var index = $(this).index();
                        console.log(index);
                        // 3.让下部里面相应索引号的item显示，其余的item隐藏
                        $(".cBox02-list .cBox02-item").eq(index).show().siblings().hide();
                    });
                })
            </script>
        </div>



        <!--通知公告  -->
        <div class="cBox03">
            <div class="cBox01-tsk">
                <ul class="cBox02-tsk_txt fl">通知公告</ul>
            </div>

            <div class="cBox03-txt01" style="top: 61px;left: 44px;">一个简洁的公告信息</div>
            <div class="cBox03-txt02" style="top: 62px;left: 280px;">2020/05/25</div>
            <div class="cBox03-txt03" style="top: 100px;left: 44px;">
                一个简洁的公告信息内容，一个简洁的公告信息 简洁的公告信息内容，一个简洁的公告信息
            </div>

            <div style="position: absolute;top: 112px;left: -42px;">
                <img src="img/千库网_教育培训可爱动物卡通小熊_元素编号12381883@2x.png" width="81px" height="117px" alt="">
            </div>

            <!-- 功能按钮 -->
            <div class="volumeBtn">
                <ul style="position: absolute;top: 12px;left: 8px;">
                    <img src="img/通知 (2)@2x.png" width="33px" height="26px" alt="">
                </ul>
                <ul class="volumeBtn-txt" style="top: -3px;left: 30px;">1</ul>
            </div>

            <div class="volumeBtn02">
                <ul class="volumeBtn02-txt01">路人甲</ul>
                <ul class="volumeBtn-txt" style="top: -4px;left: 79px;">1</ul>
            </div>

            <div class="volumeBtn03">
                <ul class="volumeBtn02-txt01">肖炳义</ul>
                <!-- <ul class="volumeBtn-txt" style="top: -4px;left: 79px;">1</ul> -->
            </div>

        </div>

        <!--班级动态  -->
        <div class="cBox04">
            <div class="cBox04-tsk">
                <ul class="cBox02-tsk_txt fl">班级动态</ul>
            </div>

            <div class="cBox04-img">
                <!-- 滑动图 -->
                <div class="slider">
                    <!-- Swiper 注意不要更改里面的结构和类名 -->
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img style="border-radius: 30px;" src="img/幼儿园小朋友.png" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img style="border-radius: 30px;" src="img/幼儿园小朋友.png" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img style="border-radius: 30px;" src="img/幼儿园小朋友.png" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img style="border-radius: 30px;" src="img/幼儿园小朋友.png" alt="">
                            </div>

                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>

        </div>

        <!--今日课表  -->
        <div class="cBox05">
            <!-- 课表门头 -->
            <div class="cBox05-tsk">
                <ul class="cBox02-tsk_txt fl">今日课表</ul>
            </div>
            <!-- 长颈鹿 -->
            <div style="position: absolute;top: 171px;left: 300px;">
                <img src="img/cjl@2x.png" width="182px" height="628px" alt="">
            </div>
            <!-- 课表 -->
            <Iframe class="cBox05Table" src="14_01.html" frameborder="0" scrolling="auto"></Iframe>




        </div>



    </div>

</body>

</html>